<!-- saved from url=(0014)about:internet -->
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<meta http-equiv="cleartype" content="on">
	<title>Bookstore</title>
	<script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="scripts/jquery-ui.js"></script>
	<script type="text/javascript" src="scripts/modernizr.custom.53451.js"></script>
	<script type="text/javascript" src="scripts/jquery.gallery.js"></script>
	<script type="text/javascript" src="scripts/jquery.iscroll5.js"></script>

	<script type="text/javascript" src="scripts/main.js"></script>
	<link href="css/gallery.css" rel="stylesheet" type="text/css"/>
	<link href="css/style.css" rel="stylesheet" type="text/css"/>
	<link href="css/responsive-style.css" rel="stylesheet" type="text/css"/>

</head>
<body>
<div class="page">
<div class="header">
	<div class="logo-head">COMPANY LOGO</div>
	<div class="nav-bar">
		<div class="nav-item active">
			<i class="icon ic-home"></i>Trang chủ
		</div>
		<div class="nav-item group">
			<span><i class="icon ic-category"></i>Thể loại</span>

			<div class="nav-group">
				<div class="nav-sub-item">Lorem</div>
				<div class="nav-sub-item">Ipsum is</div>
				<div class="nav-sub-item">Sequitur</div>
			</div>
		</div>
		<div class="nav-item group">
			<span><i class="icon ic-audio"></i>Audio book</span>

			<div class="nav-group">
				<div class="nav-sub-item">Mutationem</div>
				<div class="nav-sub-item">Consuetudium</div>
				<div class="nav-sub-item">Lectorum</div>
			</div>
		</div>
		<div class="nav-item" id="btn-account"><i class="icon ic-account"></i>Tài khoản</div>
		<div class="nav-search">
			<i class="icon ic-search"></i><span>Tìm kiếm</span>
			<input type="text" class="nav-search-input" placeholder="Input keyword"/>
			<a class="nav-search-btn">Tìm</a>
		</div>
	</div>
</div>
<div class="content">
<div class="gallery">

	<section id="knw_continer" class="knw_continer">
		<div class="dg-wrapper">
			<a href="#"><img src="images/resources/img01.jpg" alt="image05"></a>
			<a href="#"><img src="images/resources/img02.jpg" alt="image06"></a>
			<a href="#"><img src="images/resources/img03.jpg" alt="image07"></a>
			<a href="#"><img src="images/resources/img04.jpg" alt="image07"></a>
			<a href="#"><img src="images/resources/img05.jpg" alt="image07"></a>
		</div>
		<nav>
			<span class="dg-prev">&lt;</span>
			<span class="dg-next">&gt;</span>
		</nav>
	</section>
</div>
<div class="list-view">
	<div class="pr-head collapse"><span>Category Name</span><a class="btn-more-pr">More</a></div>
	<div class="pr-list" id="list1">
		<ul class="pr-list-wrapper">
			<li class="pr-item">
				<a class="pr-mask" href="detail.html">
					<div class="pr-img" style="background-image: url('images/resources/cover0.jpg')"></div>
					<a class="pr-btn">Add</a>
				</a>

				<div class="pr-info">
					<span class="pr-name">demonstraverunt dolor sit amet</span>
					<span class="pr-desc">legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consue</span>
					<span class="pr-price">100,000VND</span>
				</div>
			</li>
			<li class="pr-item">
				<a class="pr-mask" href="detail.html">
					<div class="pr-img" style="background-image: url('images/resources/cover1.jpg')"></div>
					<a class="pr-btn">Add</a>
				</a>

				<div class="pr-info">
					<span class="pr-name">Ipsum dolor sit amet</span>
					<span class="pr-desc">Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus,</span>
					<span class="pr-price">95,000VND</span>
				</div>
			</li>
			<li class="pr-item">
				<a class="pr-mask" href="detail.html">
					<div class="pr-img" style="background-image: url('images/resources/cover2.jpg')"></div>
					<a class="pr-btn">Add</a>
				</a>

				<div class="pr-info">
					<span class="pr-name">dignissim qui blandit praesent</span>
					<span class="pr-desc">qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica,</span>
					<span class="pr-price">45,000VND</span>
				</div>
			</li>
			<li class="pr-item">
				<a class="pr-mask" href="detail.html">
					<div class="pr-img" style="background-image: url('images/resources/cover3.jpg')"></div>
					<a class="pr-btn">Add</a>
				</a>

				<div class="pr-info">
					<span class="pr-name">demonstraverunt dolor sit amet</span>
					<span class="pr-desc">legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consue</span>
					<span class="pr-price">34,000VND</span>
				</div>
			</li>
			<li class="pr-item">
				<a class="pr-mask" href="detail.html">
					<div class="pr-img" style="background-image: url('images/resources/cover4.jpg')"></div>
					<a class="pr-btn">Add</a>
				</a>

				<div class="pr-info">
					<span class="pr-name">Ipsum dolor sit amet</span>
					<span class="pr-desc">Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus,</span>
					<span class="pr-price">87,000VND</span>
				</div>
			</li>
			<li class="pr-item">
				<a class="pr-mask" href="detail.html">
					<div class="pr-img" style="background-image: url('images/resources/cover5.jpg')"></div>
					<a class="pr-btn">Add</a>
				</a>

				<div class="pr-info">
					<span class="pr-name">dignissim qui blandit praesent</span>
					<span class="pr-desc">qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica,</span>
					<span class="pr-price">280,000VND</span>
				</div>
			</li>
			<li class="pr-item">
				<a class="pr-mask" href="detail.html">
					<div class="pr-img" style="background-image: url('images/resources/cover6.jpg')"></div>
					<a class="pr-btn">Add</a>
				</a>

				<div class="pr-info">
					<span class="pr-name">soluta nobis eleifend option congue</span>
					<span class="pr-desc">I legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.</span>
					<span class="pr-price">430,000VND</span>
				</div>
			</li>
			<li class="pr-item">
				<a class="pr-mask" href="detail.html">
					<div class="pr-img" style="background-image: url('images/resources/cover7.jpg')"></div>
					<a class="pr-btn">Add</a>
				</a>

				<div class="pr-info">
					<span class="pr-name">Investigationes demonstraverunt</span>
					<span class="pr-desc">dolor sit amet, consectetunt ut laoreet dolore magna aliquam erat volutpat.</span>
					<span class="pr-price">33,000VND</span>
				</div>
			</li>
			<li class="pr-item">
				<a class="pr-mask" href="detail.html">
					<div class="pr-img" style="background-image: url('images/resources/cover8.jpg')"></div>
					<a class="pr-btn">Add</a>
				</a>

				<div class="pr-info">
					<span class="pr-name">consectetuer adipiscing</span>
					<span class="pr-desc">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, nt ut laoreet dolore magna aliquam erat volutpat.</span>
					<span class="pr-price">86,000VND</span>
				</div>
			</li>
		</ul>
	</div>

</div>
<div class="list-view">
	<div class="pr-head collapse"><span>Category Name 2</span><a class="btn-more-pr">More</a></div>
	<div class="pr-list" id="list2">
		<ul class="pr-list-wrapper">

			<li class="pr-item">
				<a class="pr-mask" href="detail.html">
					<div class="pr-img" style="background-image: url('images/resources/cover5.jpg')"></div>
					<a class="pr-btn">Add</a>
				</a>

				<div class="pr-info">
					<span class="pr-name">Ipsum dolor sit amet</span>
					<span class="pr-desc">Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus,</span>
					<span class="pr-price">23,000VND</span>
				</div>
			</li>
			<li class="pr-item">
				<a class="pr-mask" href="detail.html">
					<div class="pr-img" style="background-image: url('images/resources/cover3.jpg')"></div>
					<a class="pr-btn">Add</a>
				</a>

				<div class="pr-info">
					<span class="pr-name">dignissim qui blandit praesent</span>
					<span class="pr-desc">qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica,</span>
					<span class="pr-price">9,000VND</span>
				</div>
			</li>

			<li class="pr-item">
				<a class="pr-mask" href="detail.html">
					<div class="pr-img" style="background-image: url('images/resources/cover1.jpg')"></div>
					<a class="pr-btn">Add</a>
				</a>

				<div class="pr-info">
					<span class="pr-name">Ipsum dolor sit amet</span>
					<span class="pr-desc">Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus,</span>
					<span class="pr-price">12,000VND</span>
				</div>
			</li>
			<li class="pr-item">
				<a class="pr-mask" href="detail.html">
					<div class="pr-img" style="background-image: url('images/resources/cover7.jpg')"></div>
					<a class="pr-btn">Add</a>
				</a>

				<div class="pr-info">
					<span class="pr-name">dignissim qui blandit praesent</span>
					<span class="pr-desc">qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica,</span>
					<span class="pr-price">64,000VND</span>
				</div>
			</li>
			<li class="pr-item">
				<a class="pr-mask" href="detail.html">
					<div class="pr-img" style="background-image: url('images/resources/cover6.jpg')"></div>
					<a class="pr-btn">Add</a>
				</a>

				<div class="pr-info">
					<span class="pr-name">demonstraverunt dolor sit amet</span>
					<span class="pr-desc">legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consue</span>
					<span class="pr-price">88,000VND</span>
				</div>
			</li>
			<li class="pr-item">
				<a class="pr-mask" href="detail.html">
					<div class="pr-img" style="background-image: url('images/resources/cover4.jpg')"></div>
					<a class="pr-btn">Add</a>
				</a>

				<div class="pr-info">
					<span class="pr-name">soluta nobis eleifend option congue</span>
					<span class="pr-desc">I legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.</span>
					<span class="pr-price">199,000VND</span>
				</div>
			</li>
			<li class="pr-item">
				<a class="pr-mask" href="detail.html">
					<div class="pr-img" style="background-image: url('images/resources/cover2.jpg')"></div>
					<a class="pr-btn">Add</a>
				</a>

				<div class="pr-info">
					<span class="pr-name">demonstraverunt dolor sit amet</span>
					<span class="pr-desc">legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consue</span>
					<span class="pr-price">599,000VND</span>
				</div>
			</li>
			<li class="pr-item">
				<a class="pr-mask" href="detail.html">
					<div class="pr-img" style="background-image: url('images/resources/cover1.jpg')"></div>
					<a class="pr-btn">Add</a>
				</a>

				<div class="pr-info">
					<span class="pr-name">Investigationes demonstraverunt</span>
					<span class="pr-desc">dolor sit amet, consectetunt ut laoreet dolore magna aliquam erat volutpat.</span>
					<span class="pr-price">400,000VND</span>
				</div>
			</li>
			<li class="pr-item">
				<a class="pr-mask" href="detail.html">
					<div class="pr-img" style="background-image: url('images/resources/cover7.jpg')"></div>
					<a class="pr-btn">Add</a>
				</a>

				<div class="pr-info">
					<span class="pr-name">consectetuer adipiscing</span>
					<span class="pr-desc">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, nt ut laoreet dolore magna aliquam erat volutpat.</span>
					<span class="pr-price">390,000VND</span>
				</div>
			</li>
		</ul>
	</div>
</div>
<div class="banner-view">
	<a class="banner-btn left"></a>
	<a class="banner-btn right"></a>
	<div class="pr-list list-banner"  id="list3">
		<ul class="pr-list-banner-wrapper">
			<li class="pr-item-banner" style="background-image: url('images/resources/img01.jpg')"></li>
			<li class="pr-item-banner" style="background-image: url('images/resources/img02.jpg')"></li>
			<li class="pr-item-banner" style="background-image: url('images/resources/img03.jpg')"></li>
			<li class="pr-item-banner" style="background-image: url('images/resources/img04.jpg')"></li>
			<li class="pr-item-banner" style="background-image: url('images/resources/img05.jpg')"></li>
			<li class="pr-item-banner" style="background-image: url('images/resources/img02.jpg')"></li>
			<li class="pr-item-banner" style="background-image: url('images/resources/img02.jpg')"></li>
			<li class="pr-item-banner" style="background-image: url('images/resources/img03.jpg')"></li>
			<li class="pr-item-banner" style="background-image: url('images/resources/img04.jpg')"></li>
			<li class="pr-item-banner" style="background-image: url('images/resources/img02.jpg')"></li>
			<li class="pr-item-banner" style="background-image: url('images/resources/img03.jpg')"></li>
			<li class="pr-item-banner" style="background-image: url('images/resources/img04.jpg')"></li>
		</ul>
	</div>
</div>
<div class="list-view">
	<div class="pr-head collapse"><span>Category Name</span><a class="btn-more-pr">More</a></div>
	<div class="pr-list" id="list4">
		<ul class="pr-list-wrapper">
			<li class="pr-item">
				<a class="pr-mask" href="detail.html">
					<div class="pr-img" style="background-image: url('images/resources/cover2.jpg')"></div>
					<a class="pr-btn">Add</a>
				</a>

				<div class="pr-info">
					<span class="pr-name">dignissim qui blandit praesent</span>
					<span class="pr-desc">qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica,</span>
					<span class="pr-price">45,000VND</span>
				</div>
			</li>
			<li class="pr-item">
				<a class="pr-mask" href="detail.html">
					<div class="pr-img" style="background-image: url('images/resources/cover3.jpg')"></div>
					<a class="pr-btn">Add</a>
				</a>

				<div class="pr-info">
					<span class="pr-name">demonstraverunt dolor sit amet</span>
					<span class="pr-desc">legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consue</span>
					<span class="pr-price">34,000VND</span>
				</div>
			</li>
			<li class="pr-item">
				<a class="pr-mask" href="detail.html">
					<div class="pr-img" style="background-image: url('images/resources/cover4.jpg')"></div>
					<a class="pr-btn">Add</a>
				</a>

				<div class="pr-info">
					<span class="pr-name">Ipsum dolor sit amet</span>
					<span class="pr-desc">Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus,</span>
					<span class="pr-price">87,000VND</span>
				</div>
			</li>
			<li class="pr-item">
				<a class="pr-mask" href="detail.html">
					<div class="pr-img" style="background-image: url('images/resources/cover5.jpg')"></div>
					<a class="pr-btn">Add</a>
				</a>

				<div class="pr-info">
					<span class="pr-name">dignissim qui blandit praesent</span>
					<span class="pr-desc">qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica,</span>
					<span class="pr-price">280,000VND</span>
				</div>
			</li>
			<li class="pr-item">
				<a class="pr-mask" href="detail.html">
					<div class="pr-img" style="background-image: url('images/resources/cover6.jpg')"></div>
					<a class="pr-btn">Add</a>
				</a>

				<div class="pr-info">
					<span class="pr-name">soluta nobis eleifend option congue</span>
					<span class="pr-desc">I legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.</span>
					<span class="pr-price">430,000VND</span>
				</div>
			</li>
			<li class="pr-item">
				<a class="pr-mask" href="detail.html">
					<div class="pr-img" style="background-image: url('images/resources/cover7.jpg')"></div>
					<a class="pr-btn">Add</a>
				</a>

				<div class="pr-info">
					<span class="pr-name">Investigationes demonstraverunt</span>
					<span class="pr-desc">dolor sit amet, consectetunt ut laoreet dolore magna aliquam erat volutpat.</span>
					<span class="pr-price">33,000VND</span>
				</div>
			</li>
			<li class="pr-item">
				<a class="pr-mask" href="detail.html">
					<div class="pr-img" style="background-image: url('images/resources/cover8.jpg')"></div>
					<a class="pr-btn">Add</a>
				</a>

				<div class="pr-info">
					<span class="pr-name">consectetuer adipiscing</span>
					<span class="pr-desc">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, nt ut laoreet dolore magna aliquam erat volutpat.</span>
					<span class="pr-price">86,000VND</span>
				</div>
			</li>
		</ul>
	</div>

</div>
</div>
<div class="footer">

	<div class="logo">COMPANY LOGO</div>
	<div class="footer-info">
		• Lorem ipsum dolor sit amet • Consectetuer adipiscing elit • Ntut laoreet dolore magna • Aliquam erat volutpat.
		<br/>
		• Dolor sit amet • Consectetunt • Laoreet dolore magna • Aliquam volutpat.
	</div>
</div>
<ul class="footer-nav">
	<li class="footer-nav-item"><i class="footer-nav-icon ic-account"></i><span>Tài khoản</span></li>
	<li class="footer-nav-item"><i class="footer-nav-icon ic-ship"></i><span>Đã mua</span></li>
	<li class="footer-nav-item"><i class="footer-nav-icon ic-pig"></i><span>Nạp tiền</span></li>
	<li class="footer-nav-item"><i class="footer-nav-icon ic-game"></i><span>Trò chơi</span></li>
</ul>
<!--POPUP-->
<div class="popup disable">
	<div class="popup-mask"></div>
	<div class="popup-account" id="popup-account">
		<div class="popup-decorate">
			<div class="popup-deco-back"></div>
			<div class="popup-deco-front"></div>
		</div>
		<div class="popup-content" id="popup-login">
			<div class="popup-title">Đăng nhập</div>
			<div class="popup-row">
				<span class="popup-label">Username</span>
				<input type="text" class="popup-input"/>
			</div>
			<div class="popup-row">
				<span class="popup-label">Password</span>
				<input type="password" class="popup-input"/>
			</div>
			<div class="popup-control">
				<a class="popup-link"><i class="popup-link-bullet"></i>Quên mật khẩu?</a>
				<a class="popup-button">Login</a>
				<a class="popup-link" id="btn-regis"><i class="popup-link-bullet"></i>Đăng kí tại <u>đây</u></a>
			</div>
		</div>
		<div class="popup-content disable" id="popup-register-step1">
			<div class="popup-title">Đăng Kí<div class="popup-sub-title">Bước 1</div></div>
			<div class="popup-row">
				<span class="popup-label">Username</span>
				<input type="text" class="popup-input"/>
			</div>
			<div class="popup-row">
				<span class="popup-label">Password</span>
				<input type="password" class="popup-input"/>
			</div>
			<div class="popup-row">
				<span class="popup-label">Xác nhận</span>
				<input type="password" class="popup-input"/>
			</div>
			<div class="popup-row">
				<span class="popup-label">Email</span>
				<input type="text" class="popup-input"/>
			</div>
			<div class="popup-control">
				<a class="popup-link"><i class="popup-link-bullet"></i>Điều khoản</a>
				<a class="popup-button" id="btn-submit-regis1">Đăng kí</a>
			</div>
		</div>
		<div class="popup-content disable" id="popup-register-step2">
			<div class="popup-title">Đăng Kí<div class="popup-sub-title">Bước 2</div></div>
			<div class="popup-row">
				<span class="popup-label">Ngày sinh</span>
				<input type="text" class="popup-input"/>
			</div>
			<div class="popup-row">
				<span class="popup-label">Giới tính</span>
				<input type="radio" name="gender" value="male">Nam
				<input type="radio" name="gender" value="female">Nữ
			</div>
			<div class="popup-row">
				<span class="popup-label">Địa chỉ</span>
				<input type="text" class="popup-input"/>
			</div>
			<div class="popup-row">
				<span class="popup-label">Điện thoại</span>
				<input type="text" class="popup-input"/>
			</div>
			<div class="popup-row">
				<span class="popup-label">Số tài khoản</span>
				<input type="text" class="popup-input"/>
			</div>
			<div class="popup-control">
				<a class="popup-button" id="btn-submit-regis2">Hoàn tất</a>
			</div>
		</div>

	</div>
</div>
</div>
</body>
</html>